<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body,ul,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;}
        li{list-style: none}
        a{text-decoration: none;color: #000;}
        #header{
            height: 40px;
            background-color: #333;
            color: #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        #footer{
            height: 400px;
            background-color: #eee;
        }
        #cont{
            width: 1100px;
            margin: 20px auto;
            border: solid 2px #ccc;
            border-radius: 10px;
            overflow: hidden;
        }
        #cont h2{
            font-size: 20px;
            color: #666;
            line-height: 60px;
            height:60px;
            text-indent: 20px;
            border-bottom: solid 1px #ccc;
            background: #fafafa;
        }
        #cont table{
            width: 100%;
        }
        #cont thead tr{
            background: #eee;
        }
        #cont table th{
            font-size: 14px;
            color: #999;
            line-height: 40px;
        }
        #cont table th:nth-child(1){
            text-align: left;
            text-indent: 20px;
        }
        tbody img{
            width: 100px;
        }
        tbody input[type=number]{
            width: 60px;
        }
        tbody tr td:nth-child(1){
            text-indent: 20px;
        }
        tfoot{
            line-height: 40px;
        }
        tfoot tr td:nth-child(1){
            text-indent: 20px;
        }
        tfoot tr td:nth-child(2){
            color: #999
        }
        tfoot tr span{
            color: #d44d44;
            font-size:20px;
            font-weight: bold;
        }
        .dels{
            cursor: pointer;
            font-style: normal;
        }
        .dels:active{
            color: #000;
        }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="cont">
        <h2>购物清单</h2>
        <table>
            <thead>
                <tr>
                    <th colspan="3">商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="7">购物车为空，请<a href="../index.html">继续购物</a></td>
                </tr>
                <!-- <tr>
                    <td width=80><input type="checkbox"></td>
                    <td width=110><img src="https://resource.smartisan.com/resource/4974b2bb24ae8607c55a73944662f1f7.jpg?x-oss-process=image/resize,w_432/format,webp" alt=""></td>
                    <td width=400>坚果手机</td>
                    <td align="center">1399.00</td>
                    <td align="center" width=70><input type="number"></td>
                    <td align="center" width=200>1399.00</td>
                    <td align="center"><input type="button" value="删除"></td>
                </tr> -->
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="checkbox" class="allSel">全选</td>
                    <td colspan="2"><em class="dels">删除选中</em></td>
                    <td colspan="2" align="right" class="sum">总数量：<span>0</span>件</td>
                    <td class="allPrice">总价：￥<span>0</span></td>
                    <td align="center"><input type="button" value="去支付"></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <div id="footer"></div>
</body>
<script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>

<script>
    // 守卫
    // 获取用户信息
    var uMsg = localStorage.getItem("userMsg");
    // 解析用户信息
    if(uMsg === null){
        uMsg = [];
    }else{
        uMsg = JSON.parse(uMsg);
    }
    // 解析数组中的数据，判断isLogin是否为ok
    var flag = false;
    for(var i=0;i<uMsg.length;i++){
        if(uMsg[i].isLogin === "ok"){
            flag = true;
            break;
        }
    }
    // 是否登录
    // 没登录
    if(!flag){
        // 回到首页
        location.href = "../index.html";
    }
    
</script>

<script>
    // 加载头部的结构
    $("#header").load("../public/header.html");
    // 加载底部的结构
    $("#footer").load("../public/footer.html");
</script>
<script>
// 先获取localStorage中的数据
var msg = localStorage.getItem("proMsg");
// 根据数据内容，选择解析方式
if(msg !== null){
    msg = JSON.parse(msg);
}else{
    msg = [];
}
// 根据数组长度，决定是否需要渲染购物车
if(msg.length > 0){
    // 开启数据请求，请求所有商品数据
    $.ajax({
        url:"../data/pro.json",     // 要请求的数据地址
        dataType:"text",            // 要请求的数据格式
        success:function(res){      // 请求成功后的数据
            // 解析数据
            res = JSON.parse(res);
            
            // 调用渲染页面
            render(res, msg);
        }
    })
}

// 渲染页面功能
function render(res, msg){
    // 提前准备字符容器，用来存放页面结构
    var str = "";
    // 遍历所有商品数据
    for(var i=0;i<res.length;i++){
        // 遍历localStorage中的数据
        for(var j=0;j<msg.length;j++){
            // 将商品数据的proId和localStorage中的数据的id做比对
            // 比对成功，当前数据，就是要渲染的购物车数据
            if(res[i].proId === msg[j].id){
                // 拼接页面结构
                str = str + `<tr index="${res[i].proId}">
                    <td width=80><input class="selPro" type="checkbox" select="${msg[j].flag ? 'ok': ''}"></td>
                    <td width=110><img src="${res[i].proImg}" alt=""></td>
                    <td width=400><a href="../detail/index.html#${res[i].proId}">${res[i].proName}</a></td>
                    <td align="center">${res[i].price}</td>
                    <td align="center" width=70><input class="set" type="number" value="${msg[j].num}" min=1></td>
                    <td align="center" width=200>${res[i].price * msg[j].num}</td>
                    <td align="center"><input class="del" type="button" value="删除"></td>
                </tr>`
            }
        }
    }
    // 将拼接好的页面结构，渲染到指定容器tbody中
    $("tbody").html(str);

    // 调用删除功能
    delFn(msg);

    // 调用修改功能
    updateFn(msg);

    // 提前在页面渲染的结构中，给复选框添加一个自定义属性select
    // 用来记录自身的复选框是否被选中
    // 根据数据中存储的flag属性判断当前商品的复选框是否需要select为ok
    
    // 根据页面上的复选框的select属性，决定自身是否是选中状态
    isSelect(msg);

    // 每个复选项在页面刚打开时都应该被检测，如果全部是选中状态，那么选中全选复选框
    isSelectAll(msg);

    // 调用单个商品的复选框的状态更新
    selProFn(msg);

    // 调用全选复选框的状态更新
    allSelFn(msg)

    // 调用计算总价和总数量
    allPro(msg);

    // 调用删除选中的商品
    delsFn(msg);
}


function delsFn(msg){
    // 删除选中状态的商品，没有选中的不删除
    $(".dels").click(function(){
        var newMsg = [];
        for(var i=0;i<msg.length;i++){
            if(!msg[i].flag){
                newMsg.push(msg[i]);
            }
        }
        // 重新设置数据，覆盖原有数据
        localStorage.setItem("proMsg",JSON.stringify(newMsg));

        render(res, newMsg);

        msg = newMsg;
    })
}

function allSelFn(msg){
    // 全选复选框的状态修改事件
    $(".allSel").on("input",function(){
        // 设置数据中所有复选框都为统一状态
        for(var i=0;i<msg.length;i++){
            msg[i].flag = this.checked;
        }
        // 重新设置数据，覆盖原有数据
        localStorage.setItem("proMsg",JSON.stringify(msg));

        // 设置所有页面上的复选框的select属性
        if(this.checked){
            $(".selPro").attr("select","ok");
        }else{
            $(".selPro").attr("select","");
        }
        // 根据页面上的复选框的select属性，决定自身是否是选中状态
        isSelect(msg);

        // 计算总价和总数量
        allPro(msg);
    })
}
function selProFn(msg){
    // 单个复选框的选中转换被修改时，同步到数据中
    $(".selPro").on("input",function(){
        var that = this;
        updateMsg(that, function(i){
            // 修改当前索引对应数据的flag值，用来记录当前商品是否是选中状态
            msg[i].flag = that.checked;
        })

        // 每当一个复选框的状态被改变后，都应该立即检索是否所有复选框都被选中
        isSelectAll(msg);

        // 计算总价和总数量
        allPro(msg);
    })
}
function updateFn(msg){
    // 修改功能：只有在这里，可以获取到修改数量的输入框
    $(".set").on("input",function(){
        var that = this;
        updateMsg(that, function(i){
            // 修改当前索引对应数据的num
            msg[i].num = $(that).val();
        })

        // 计算小计
        $(this).parent().next().html( $(this).val() * $(this).parent().prev().html() );

        // 计算总价和总数量
        allPro(msg);
    })
}
function delFn(msg){
    // 删除功能：只有在这里，可以获取到删除按钮
    // 给删除按钮绑定点击事件
    $(".del").click(function(){
        updateMsg(this, function(i){
            // 删除索引对应的数据
            msg.splice(i,1)
        })

        // 删除当前点击的商品的tr
        $(this).parent().parent().remove();

        // 计算总价和总数量
        allPro(msg);
    })
}

function isSelectAll(msg){
    // 提前准备一个状态容器
    var onoff = true;
    // 遍历数据
    for(var i=0;i<msg.length;i++){
        // 判断每个数据的flag状态：只要有一个不是被选中状态，就将状态容器的值修改为false
        if(!msg[i].flag){
            onoff = false;
        }
    }
    // 循环结束后，如果状态容器中的值依然是true，表示所有复选框都被选中了
    if(onoff){
        $(".allSel")[0].checked = true;
    }else{
        // 反之，某一个复选框没有被选中，那么就取消全选的选中状态
        $(".allSel")[0].checked = false;
    }
}
function isSelect(msg){
    // 根据页面上的复选框的select属性，决定自身是否是选中状态
    for(var i=0;i<$(".selPro").length;i++){
        if($(".selPro")[i].getAttribute("select") === "ok"){
            $(".selPro")[i].checked = true;
        }else{
            $(".selPro")[i].checked = false;
        }
    }
}
function updateMsg(element, fn){
    // 获取当前复选框所在的id
    var id = $(element).parent().parent().attr("index");
    // 从数据中，根据这个id找到对应的索引
    for(var i=0;i<msg.length;i++){
        if(msg[i].id === id){
            break;
        }
    }
    // 更新数据
    fn(i);
    // 重新设置数据，覆盖原有数据
    localStorage.setItem("proMsg",JSON.stringify(msg));
}
    
function allPro(m){
    console.log(m)
    // 准备计算总数量的变量
    var sum = 0;
    // 准备计算总价的变量
    var allPrice = 0;
    // 遍历所有数据
    for(var i=0;i<m.length;i++){
        // 判断是否被选中
        if(m[i].flag){
            // 选中的参与总数量计算
            sum = sum + m[i].num * 1;
            // 选中的参与总价计算
            allPrice = allPrice + (m[i].num * m[i].price);
        }
    }
    // 将是总数量放置在总数元素内
    $(".sum").find("span").html(sum);
    // 将是总价放置在总价元素内
    $(".allPrice").find("span").html(allPrice);
}

</script>
</html>